<!DOCTYPE html>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="../js/easyui/themes/icon.css" />

<!-- 引入ztree -->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		$(function() {
			//自定义校验规则
			$.extend($.fn.validatebox.defaults.rules, {

				minLength: {

					validator: function(value, param) {

						return value.length >= param[0];

					},

					message: '请输入至少 {0} 字符.'

				}

			});

			$("#saveBtn").click(function() {
				if($("#myform").form('validate')) {
					$("#myform").submit();
				}
				else{
					$.messager.alert("警告","表单中有非法内容","warning");
				}
			})
		})
	</script>

	<body>

		<form id="myform" name="myform" action="http://www.baidu.com">
			<input type="button" class="easyui-linkbutton" value="保存" id="saveBtn" /><br/> 
			基本验证: <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" /><br/> 
			邮箱验证：<input type="text" name="email" class="easyui-validatebox" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br/> 
			网址验证：<input type="text" name="url" class="easyui-validatebox" validtype="url" required="true" missingMessage="不能为空" /><br/> 
			长度验证：<input type="text" name="length" class="easyui-validatebox" validtype="length[8,20]" required="true" missingMessage="不能为空" invalidMessage="有效长度8-20" /><br/>
			<!--远程验证：<input type="text" name="remote" class="easyui-validatebox" validtype="remote['../standard_validate.action','name']" required="true" missingMessage="不能为空" invalidMessage="用户名已存在"/><br/> -->
			自定义校验规则: <input class="easyui-validatebox" data-options="validType:'minLength[5]'"> <br/> 
			数字框校验: <input type="text" class="easyui-numberbox" data-options="min:0,precision:2"></input><br/> 
			日历: <input id="dd" type="text" class="easyui-datebox" required="required"></input> <br/>
			下拉列表框:  <select id="dept" class="easyui-combobox" required="true" name="dept" style="width:200px;">
							<option value="1">行政部</option> 
							<option>人事部</option> 
							<option>教学部</option> 
							<option>市场部</option> 
							<option>学工部</option> 
						</select> 


		</form>

	</body>

</html>